<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- 引入Chart.js -->
</head>
<body>
    <header>
        <h1>数据统计</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="guide.html">垃圾分类指南</a></li>
                <li><a href="recycling.html">回收点查询</a></li>
                <li><a href="appointment.html">预约服务</a></li>
                <li><a href="feedback.html">用户反馈</a></li>
                <li><a href="activities.html">活动宣传</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>回收数据统计</h2>
        <p>展示近期垃圾回收的统计数据和趋势。</p>
        <section>
            <h3>统计图表</h3>
            <canvas id="recyclingChart"></canvas>
            <script>
                const ctx = document.getElementById('recyclingChart').getContext('2d');
                const recyclingChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['纸张', '塑料', '玻璃', '金属', '其他'],
                        datasets: [{
                            label: '回收量 (吨)',
                            data: [120, 150, 80, 50, 30],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            </script>
        </section>
        <section>
            <h3>数据概览</h3>
            <ul>
                <li>总回收量: 500吨</li>
                <li>参与用户: 1200人</li>
                <li>回收点数量: 50个</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 垃圾回收服务. 保留所有权利.</p>
    </footer>
</body>
</html>